<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<text class="iconfont icon-back"></text>
			</view>
			<view class="header-title">编辑单元</view>
			<view class="header-right"></view>
		</view>
		
		<!-- 表单区域 -->
		<view class="form-container">
			<view class="form-item">
				<text class="form-label required">单元名称</text>
				<input class="form-input" v-model="formData.name" placeholder="请输入单元名称" />
			</view>
			
			<view class="form-item">
				<text class="form-label required">所属小区</text>
				<picker class="form-picker" :range="cellList" range-key="name" @change="onCellChange">
					<view class="uni-input" :class="{'placeholder': !formData.cellName}">{{ formData.cellName || '请选择所属小区' }}</view>
				</picker>
			</view>
			
			<view class="form-item">
				<text class="form-label required">楼层数</text>
				<input class="form-input" v-model="formData.floorCount" type="number" placeholder="请输入楼层数" />
			</view>
			
			<view class="form-item">
				<text class="form-label">单元状态</text>
				<view class="status-switch">
					<view class="status-options">
						<view class="status-option" 
							:class="{'active': formData.status === '0'}" 
							@click="formData.status = '0'">正常</view>
						<view class="status-option" 
							:class="{'active': formData.status === '1'}" 
							@click="formData.status = '1'">停用</view>
					</view>
				</view>
			</view>
			
			<view class="form-item">
				<text class="form-label">备注</text>
				<textarea class="form-textarea" v-model="formData.remark" placeholder="请输入备注信息" />
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-section">
			<view class="submit-button" @click="submitForm">保存修改</view>
		</view>
	</view>
</template>

<script>
	import { getUnit, updateUnit } from '@/api/lock/unit';
	import { listCell2 } from '@/api/lock/cell';
	
	export default {
		data() {
			return {
				unitId: null,
				formData: {
					id: null,
					name: '',
					cellId: null,
					cellName: '',
					floorCount: '',
					status: '0',
					remark: ''
				},
				cellList: [],
				rules: {
					name: [{ required: true, message: '请输入单元名称', trigger: 'blur' }],
					cellId: [{ required: true, message: '请选择所属小区', trigger: 'change' }],
					floorCount: [{ required: true, message: '请输入楼层数', trigger: 'blur' }]
				}
			}
		},
		onLoad(options) {
			this.unitId = options.id;
			if (this.unitId) {
				// 加载小区列表和单元详情
				Promise.all([this.getCellList(), this.getUnitInfo()]);
			} else {
				uni.showToast({
					title: '参数错误',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 获取单元详情
			getUnitInfo() {
				uni.showLoading({
					title: '加载中...'
				});
				
				return getUnit(this.unitId).then(res => {
					uni.hideLoading();
					if (res.code === 200) {
						const unitInfo = res.data || {};
						
						// 设置表单数据
						this.formData = {
							id: unitInfo.id,
							name: unitInfo.name || '',
							cellId: unitInfo.cellId,
							cellName: unitInfo.cellName || '',
							floorCount: unitInfo.floorCount || '',
							status: unitInfo.status || '0',
							remark: unitInfo.remark || ''
						};
					} else {
						uni.showToast({
							title: res.msg || '获取单元详情失败',
							icon: 'none'
						});
					}
				}).catch(error => {
					uni.hideLoading();
					console.error('获取单元详情失败', error);
					uni.showToast({
						title: '获取单元详情失败',
						icon: 'none'
					});
				});
			},
			
			// 获取小区列表
			getCellList() {
				uni.showLoading({
					title: '加载小区数据...'
				});
				
				return listCell2().then(res => {
					uni.hideLoading();
					if (res.code === 200) {
						this.cellList = res.data || [];
					} else {
						uni.showToast({
							title: res.msg || '获取小区列表失败',
							icon: 'none'
						});
					}
				}).catch(error => {
					uni.hideLoading();
					console.error('获取小区列表失败：', error);
					uni.showToast({
						title: '获取小区列表失败',
						icon: 'none'
					});
				});
			},
			
			// 小区选择变化
			onCellChange(e) {
				const index = e.detail.value;
				if (this.cellList[index]) {
					this.formData.cellId = this.cellList[index].id;
					this.formData.cellName = this.cellList[index].name;
				}
			},
			
			// 表单验证
			validateForm() {
				if (!this.formData.name.trim()) {
					uni.showToast({
						title: '请输入单元名称',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.formData.cellId) {
					uni.showToast({
						title: '请选择所属小区',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.formData.floorCount || isNaN(this.formData.floorCount)) {
					uni.showToast({
						title: '请输入有效的楼层数',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			},
			
			// 提交表单
			submitForm() {
				if (!this.validateForm()) {
					return;
				}
				
				uni.showLoading({
					title: '保存中...'
				});
				
				// 处理数据格式
				const submitData = {
					...this.formData,
					floorCount: parseInt(this.formData.floorCount)
				};
				
				updateUnit(submitData).then(res => {
					uni.hideLoading();
					if (res.code === 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						});
						
						// 修改成功后返回详情页，并刷新数据
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg || '修改失败',
							icon: 'none'
						});
					}
				}).catch(error => {
					uni.hideLoading();
					console.error('修改单元失败：', error);
					uni.showToast({
						title: '修改失败，请稍后重试',
						icon: 'none'
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 0;
		background-color: #f5f7fa;
		min-height: 100vh;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background: linear-gradient(135deg, #4B71F7, #3A5FE0);
		color: #fff;
		
		.header-left, .header-right {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.iconfont {
			font-size: 36rpx;
			color: #fff;
		}
		
		.header-title {
			font-size: 32rpx;
			font-weight: bold;
			flex: 1;
			text-align: center;
		}
	}
	
	.form-container {
		padding: 30rpx 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	}
	
	.form-item {
		margin-bottom: 30rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.form-label {
		display: block;
		font-size: 28rpx;
		color: #606266;
		margin-bottom: 16rpx;
		
		&.required::before {
			content: '*';
			color: #f56c6c;
			margin-right: 4rpx;
		}
	}
	
	.form-input, .form-picker {
		width: 100%;
		height: 80rpx;
		background-color: #f5f7fa;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
	}
	
	.form-textarea {
		width: 100%;
		height: 200rpx;
		background-color: #f5f7fa;
		border-radius: 8rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
	}
	
	.uni-input {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		
		&.placeholder {
			color: #999;
		}
	}
	
	.status-switch {
		padding: 10rpx 0;
		
		.status-options {
			display: flex;
			border: 1px solid #dcdfe6;
			border-radius: 8rpx;
			overflow: hidden;
			width: 300rpx;
		}
		
		.status-option {
			flex: 1;
			text-align: center;
			padding: 16rpx 0;
			font-size: 28rpx;
			color: #606266;
			background-color: #f5f7fa;
			
			&.active {
				background-color: #409EFF;
				color: #fff;
				font-weight: 500;
			}
			
			&:first-child {
				border-right: 1px solid #dcdfe6;
			}
		}
	}
	
	.submit-section {
		padding: 40rpx 20rpx;
	}
	
	.submit-button {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background: linear-gradient(135deg, #4B71F7, #3A5FE0);
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		border-radius: 45rpx;
		box-shadow: 0 10rpx 20rpx rgba(74, 112, 247, 0.3);
		
		&:active {
			opacity: 0.9;
		}
	}
	
	@font-face {
		font-family: "iconfont";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAT4AAsAAAAACfwAAASrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDMgqGTIVaATYCJAMUCwwABCAFhGcHUBtACBEVpCeRfYFtw71FiEUsSq3GGomF/urWePiyofeDJ/yP9rt35r4ZEU3isPEUTyKRSJZIgkgn6YRGqISX//+db9nbP2NiUkyqJVXCE57ET8jp7Ula35wsUtnE1RCpfiqTMZlIOIRD4RC+P17T+9/McioLLC9QXHNOdYqxVECBjQFFeGdeZAXkDqS36tCrCRTsYghqLdlVCS5csKYAnfY0NXDJKFQpqoETQuZYMocu+MXJNHkHAHzffj/+QTu4IJmZYKdHdxkJin/6+zlQa3n4H42KO8D25ViuI2MbUAgfYp33QabftkXBzyflDnBCSOqnf77zefPns5//vRxCxkLxDy+RZEImiBVh12bkJ3ytEeSnxBopP5sIFPysLVDxc7RAzu+FtlTh+yGmCdiD4CuQ9YhInQvnqTZ0GN1sMRSGlrri4JDIjvHQ+hEvqk7dKbt6V3TzlvTOHdXt2/Lb/uo7Vz2PHrU8fNjTuGXl1q3KKxwRnp7i05WZRzLEaOZzAuGvRh2ukbCd26xeXs3dWrI7R+1eXgEtXh5+nh7+Le516Rs8JGEtXp4dLIeG7PbMjXlZzTc7FrGvPTvnJyddu9CytKS7dq2nYeN2R5Wj5N69CvKoTIxgngUXj99rdG/0bZXfKLlWfHVp/bqwDRvChDG8qNPnlk6dWzR1TsuCefvN9q9XrMhasMC8wOztcqVyyZr8efPycwJ7ysQnA0/FZ2KiL5yDXRNcS9yRu71HmzZtP+yNz6CJubTpICbfuXjWYcL1mdlVYqKv3PENDg5NP4tMYD9fv0XQfrh64Qxiwm7w85lHHZqbt8+cOnuhftIzv+Dn0+ZfP+ybOu1lp+szcjIT0vdFHNg7PdM36FRHS4v7CUH7/L2z2X8QiDt2bHrkGVrBIvFmrHfqHJYQNWHBp6UTzsRO76i5RCdvTWAuPTlePX7gzPuXKHbuxOOCmrVyPWOXeT5pPu5pPsbnPMpxjWQez1yzfJxrTAP9pKHNXI5HKRKYm4biNp2j+uf0jbqJbh5PeDX0vxEu4G+JX5LfMvziM/GL6Hb6lnzEr/9/qN/bY7u/9XxRwX09BdyPKRXY1UgmKKB3TsEfJmOaKKrAVAPwb22jVPQ9VU+pXRDiFNRvEEiW1ZClawnCwm5DxcFBKJTOQsGW4dODjkVCKSwCbHIJEOq2Q1LzA7K6OwhhfwkVbX9DoV4IFJyEPIYHpkHnWpnAwIrNL5AmVkUmq1J5HpaPWTIpEpA3keEkOlIEMlF8/nqCFtGQNV4mz0FlFaLBkGFcLofLSHNZIsvliXo5Tywf3EGQTWsIGGDJzF4gmmAVsayi+ubzw2SLMRWxVk8CNyHDRQpnFQGZkKKXN65FPKLNDF3MUjkvR6pMQWRgkLGJXAlOBlJFYRHl9fdXkecJK4D9qKOIFTtJY/S//HRpL1Wwzf8OOypCSBGGcIiFOPje5xhVQmIprEpGRZKiYFl9SBNXizIAAA==') format('woff2');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 32rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-back:before {
		content: "\e679";
	}
</style> 